<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>音乐选择</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body class="bg_ff">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title seach_music">
		    	<img src="images/icon_search.png" alt="" />
		    	<input type="text" name="" id="key" value="" placeholder="请输入歌曲名称" />
		    </h1>
		    <a href="javascript:void(0);" class="right small_btn mg_top10" onclick="getMusicList(1)">搜索</a>
		</header>
		<div class="mui-content bg_ff padding_12">
			<div class="music_box ">
				
			</div>
		    
		  <!-- <div class="mui-clearfix music_list mg_top20">
		    	<div class="left width80">
		    		<dl class="mui-clearfix">
		    			<dt class="left relative">
		    				<img class="music_img" src="images/bg1.png"/>
		    				
		    				<a href="javascript:void(0);" class="absolute video_btn">
		    					<audio  autoplay="autoplay" poster='images/bg1.png'>  
					                <source src="" type="audio/mp3"></source>  
					                
					            </audio>
		    					
		    				</a>
		    			</dt>
		    			<dd class="left">
		    				<h5 class="C_tittle color_25 font_15 bold mui-ellipsis">恋爱达人</h5>
		    				<h6 class="C_name color_55 mg_top10 font_13">罗志祥/徐熙娣</h6>
		    				<p class="C_time color_55 mg_top10 font_13">01:02</p>
		    			</dd>
		    		</dl>
		    	</div>
		    	<a href="javascript:void(0);" class="btn small_btn right mg_top20">使用</a>
		    </div> -->
		    
		</div>
		
		
		
	
		
		
		<script src="js/mui.js"></script>
		<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			//获取音乐列表
			function getMusicList(current){
				$('.gif').show()
				$.ajax({
					type:"post",
					url:urlcom + "work/getMusicList",
	//				headers:{'token_access':localStorage.getItem('token')},
					async:true,
					dataType: 'json', 
					data:{
						userId:localStorage.getItem('userId'),
						keywords:$('#key').val(),
						current:current,
						size:14
					},
					success:function(res){
						$('.gif').hide()
						if(res.code==0){
							var html='';
							$.each(res.data, function(k,v) {
								html+='<div class="mui-clearfix music_list mg_top20">'+
						    	'<div class="left width80">'+
						    		'<dl class="mui-clearfix">'+
						    			'<dt class="left relative">'+
						    				'<img class="music_img" src="'+v.coverImg+'"/>'+
						    				'<a href="javascript:void(0);" class="absolute video_btn" onclick="autoplay(this)"></a>'+
						    				'<audio  class="btn-audio"  poster="images/bg1.png">  '+
									                '<source src="'+v.songFile+'" type="audio/mp3"></source>'+  
									                
									        ' </audio>'+
						    			'</dt>'+
						    			'<dd class="left">'+
						    				'<h5 class="C_tittle color_25 font_15 bold mui-ellipsis">'+v.songName +'</h5>'+
						    				'<h6 class="C_name color_55 mg_top10 font_13">'+v.author +'</h6>'+
						    				'<p class="C_time color_55 mg_top10 font_13">01:02</p>'+
						    			'</dd>'+
						    		'</dl>'+
						    	'</div>'+
						    	'<a href="javascript:void(0);" class="btn small_btn right mg_top20" data-id="'+v.bgmId +'" name="'+v.songName+'" onclick="getmusic(this,'+v.bgmId+')">使用</a>'+
						   ' </div>'
							});
							$('.music_box').html(html)
						}
					}
				});
			} getMusicList(1)
			  $('.btn-audio').css({'width':'100%','height':'100%'});
			 // 点击当前播放器播放当前音乐 并关闭其他音乐
			 
            function autoplay(obj){
				var that = $(obj)
				var audios =$(".music_box").find($('.btn-audio'))
				var player = that.siblings('.btn-audio')[0]
				var arr =[]
				for(var i = 0;i<audios.length;i++){
					arr.push(audios[i])
				}
				// arr.forEach(function(k,v){
				// 	k.pause()
				// })
				$('.music_box').find('.video_btn').css({'background':'url(images/viedo.png)no-repeat','background-size':' 100% 100%'})
			console.log(player.paused)
			if (player.paused){ /*如果已经暂停*/
			    that.css({'background':'url(images/zt.png)no-repeat','background-size':' 100% 100%'})
				 arr.forEach(function(k,v){
				 	k.pause()
				 })
				player.play(); /*播放*/
				console.log(player.paused)
					
				}else {
					console.log(player.paused)
					that.css({'background':'url(images/viedo.png)no-repeat','background-size':' 100% 100%'})
					player.pause();/*暂停*/
					
				}
            }
			function getmusic(obj,id){
				var that = $(obj)
				var name =that.attr('name')
				console.log(name)
				window.location.href = 'indexRelease.html?bgmId='+ id +' &&name='+ name
			}
			
		</script>
	</body>

</html>
